<template>
  <div class="box">
    <Chart :option="options" />
  </div>
</template>

<script lang="js">
import { defineComponent, onBeforeUnmount, reactive } from 'vue'
import Chart from '@/views/charts/index.vue'
import option from './modules/bar'
import doctor from "@/api/doctor";
import admin from "@/api/admin.js";
export default defineComponent({
  components: {
    Chart
  },
  setup() {
    let timer = null;
    const datar = [1,2,3,4,5,6,7,8,9,10,11,12]
    //const datar2 = [100,200,300,400,500,600,700,800,900,1000,1000,1000]
    // 初始化一个长度为12的数组，所有元素初始值为0


    const datar2 = new Array(12).fill(0);
    const getRegister= () =>{
         const register = {
           status:null,
           pageIndex: 0,
           pageSize: 10
         };
         doctor.deviceListSearch(register)
             .then((res) =>{
               if (res.data.code === 200){
                 const dataResult = res.data.data
                 // 提取 productionTime 的值并存放在数组中
                 const productionTimes = dataResult.result.map(item => item.productionTime);
                // 将每个 productionTime 转换为 Date 对象，并提取月份信息
                 const months = productionTimes.map(time => {
                   const date = new Date(time);
                   const month = date.getMonth() + 1; // JavaScript 的月份是从 0 开始的，所以需要加 1
                   return {
                     productionTime: time,
                     month: month
                   };
                 });
                 // 遍历 months 数组，根据月份信息更新 datar2 中的对应元素
                 months.forEach(item => {
                   datar2[item.month - 1]++; // 月份是从1开始的，所以需要减1来对应数组的索引
                 });
                 console.log(months)
            }
         })
          .catch((err) => {
            console.log(err);
          })
       }
    getRegister()

    const options = reactive(option)
    // 模拟异步请求
    timer = setTimeout(() => {
      options.series[0].data = datar
      options.series[1].data = datar2
    },1000)
    // 组件销毁时清除定时器
    onBeforeUnmount(() => {
      clearInterval(timer)
      timer = null;
    })
    return {
      options
    }
  }
})
</script>

<style lang="scss" scoped>
  .box {
    margin: 10px auto 0;
    width: calc(100% - 40px);
    height: 300px;
    background: var(--system-page-background);
    padding: 20px;
    overflow: hidden;
  }
</style>